<template>
  <div class="dl-row-sb class-box mar-bottom bodyClass">
    <!-- <div class="left"  v-loading="loading"> -->
	<div class="widthleft"  v-loading="loading">
		<div v-if="courseChapterList.length>0">
			<div v-for="(item, index) in courseChapterList" :key="index" class="class-main">
			  <h3>{{ item.label }}</h3>
			  <div v-for="(i, index1) in item.courseResourceList" :key="index1"  @click="toVideo(i)" class="item dl-row-sb center" :class="activeIndex==i.id?'state':''" >
			    <p>{{i.resourceName}}</p>
			    <div>
					<!-- <el-button size="mini" type="success" round class="btn"><i class="el-icon-download" style="font-size: 15px;"></i>下载</el-button> -->
					<!-- <span class="time">{{i.classHour | formateDate}}</span> -->
					<span class="time">{{i.resourceFile | getFileType}}</span>
			    </div>
			    <div v-if="i.id==activeIndex" class="state-box">最近学习</div>
			  </div>
			</div>
		</div>
		<div class="note-box mar-top-20" v-if="courseChapterList.length==0  &&!loading">
			<el-empty :image-size="250" :image="require('../../../assets/no_data_images/no_chapter.png')" ></el-empty>
		</div>
    </div>
	<course-paly-video ref="video" :video-url="videoUrl"></course-paly-video>
</div>
</template>

<script>
	import coursePalyVideo from './coursePalyVideo.vue'
	import { formatSeconds } from '@/utils/index'
	import { personStudyInfo,savePersonStudyInfoXf } from '@/api/course'
	import initData from '@/mixins/initData'
	export default {
		mixins: [initData],
		components: {coursePalyVideo},
		props:{
			courseChapterList:{
			  type:Array,
			  default:null,
			},
			couserObj:{
				type:Object,
				default:null,
			},
			courseScore:{
				type:Object,
				default:null,
			}
		},
	   data() {
		return {
		  loading:true,
		  activeIndex:"",
		  videoUrl:"",
		  courseResId: this.$route.query.id,
		  personStudyInfoObj:{},
		  studyPercent: 0.00,
		  userImg: require('../../../assets/image/u353.png'),
		  colors: ['#f6fbef', '#F7BA2A', '#FF9900'],
		}
	  },
	  filters: {
	    formateDate (time) {
	      return formatSeconds(time)
	    },
		getFileType(resourceFile){
			var fileName="";
			if(resourceFile!=""){
			  var array=eval('(' + resourceFile + ')');
			  if(Object.prototype.toString.call(array)==='[object Array]'){
				fileName=array[0].name;
			  }
			  if(fileName!="" ){
				  return fileName.substring(fileName.lastIndexOf(".")+1,fileName.length)+"文件";
			  }else{
				  return "其他"
			  }
			}
		},
	  },
	  created() {
	  	this.$nextTick(() => {
	  	    //this.studyInfo()
			//this.getPersonCourseStudyPercent()
			setTimeout(()=> {
				this.loading = false
			}, 1000);
	  	})
	  },
	  methods: {
		saveXfStudyInfo(resourceId){
			var form={
				id:"",
				courseId:this.couserObj.id,
				isFinish:0,
				courseResourceId:resourceId,
			}
			savePersonStudyInfoXf(form).then(res=>{
			
			}).catch(res=>{
				this.$message({
					type: 'error',
					message: '操作失败'
				}); 
			})
		},
		gradeForm(){
			this.$refs.gradeFrom.dialog = true
			this.$refs.gradeFrom.form.courseId = this.couserObj.id
		},
		toVideo(resource) {
			var imageUrl="";
			var fileName="";
			if(resource.resourceFile!=""){
			  var array=eval('(' + resource.resourceFile + ')');
			  if(Object.prototype.toString.call(array)==='[object Array]'){
			    imageUrl=array[0].url;
				fileName=array[0].name;
			  }
			  if(fileName.indexOf("pdf")>0 || fileName.indexOf("PDF")>0){
				  window.open(imageUrl.replaceAll("download=1","download=0"))
			  }else{
				  //this.videoUrl = getUrl(resource.resourceFile)
				  this.videoUrl = imageUrl;
				  this.$refs.video.dialog = true
			  }
			  this.saveXfStudyInfo(resource.id)
			  this.activeIndex=resource.id;
			  this.$parent.personStudyInfoObj.courseResourceName=resource.resourceName;
			}else{
				this.$message({
				  message: '无相关课程资源！',
				  type: 'danger'
				});
			}			
		},
		studyInfo(){
			var params={
				courseId:this.$route.query.courseId
			}
			personStudyInfo(params).then(res=>{
				if(res!="" && res!=null){
					this.activeIndex=res.courseResourceId
					this.personStudyInfoObj=res;
				}
			})
		},
	  },
	}
</script>

<style lang="scss" scoped>
	.bodyClass{
		min-height: calc(100vh - 594px);
	}
.btn{
  margin-right: 10px;
  padding: 4px 10px;
}
.widthleft{
	width: 1154px;
}
</style>